'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';

import NavBar from '../../../../core/component-biz/comp.nav-swich-bar';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import PeopleInfoItem from "../../../../core/component-biz/comp.people-info-panel";
import Util from "../../../../core/utils/util";
import API from "../../../../constants/server-apis"
import Color from '../../../../core/constant/color';
class ApiListScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "API Doc 文档",
        headerTintColor: "white",
        tabBarVisible: false,
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {}
    }


    componentDidMount() {

    }

    getApiList() {
        const ApiKeys = Object.keys(API);
        let apiList = [];
        ApiKeys.map((key, index) => apiList.push({
            name: key,
            apiInfo: API[key],
        }))
        return apiList;
    }

    onPressJumpToAPI(item, index) {
        const {apiInfo} = item;
        const {navigate} = this.props.navigation;
        navigate('ApiDoc', {apiInfo: apiInfo});
    }

    genApiItemUI(item, index) {
        return (
            <TouchableOpacity key={`api-item-${index}`} onPress={this.onPressJumpToAPI.bind(this, item, index)}>
                <View style={styles.apiItem}>
                    <Text style={styles.apiName}>{item.apiInfo.doc.name} - {item.name}</Text>
                    <Text style={styles.apiShortDesc}>{item.apiInfo.doc.shortDesc}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    genApiListUI() {
        const apiList = this.getApiList();
        const apiListUI = apiList.map((item, index) => this.genApiItemUI(item, index))
        return apiListUI;
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genApiListUI()}
                </ScrollView>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    scrollView: {},
    apiItem: {
        padding: 8,
    },
    apiName: {
        fontSize: 14,
    },
    apiShortDesc: {
        fontSize: 12,
        color: 'gray',
        padding: 4,
        paddingLeft: 0,
    },
});

export default ApiListScene;